import React from "react";
import { Card, Row, Col, Table, message, Modal, Button, Badge } from "antd";
import { ColumnProps, SortOrder } from "antd/es/table";
import { PaginationConfig } from "antd/es/pagination/Pagination";
import { TableRowSelection, SorterResult } from "antd/es/table/interface";
import AJAX, { AJAXResponseConfig, AJAXRequestConfig } from "../../ajax/ajaxServer";
import { formatSex, formatInterest } from "../../utils/tools";
import { getPaginationConfig } from "../../utils/utils";
import { ResponseResult, UserInfo } from "../../utils/interface";
import "./index.less";

interface IProps {}
interface IStates {
	customData: Array<UserInfo>;
	paginationConfig1: PaginationConfig;
	ageSortOrder: SortOrder;
}

class HighTable extends React.Component<IProps, IStates> {
	paramConfig1: any;

	constructor(props: IProps, state: IStates) {
		super(props, state);
		this.state = {
			customData: [],
			paginationConfig1: {},
			ageSortOrder: "descend"
		};

		this.paramConfig1 = {
			page: 1
		};
	}

	componentDidMount() {
		this.requestStandardDatas();
	}

	requestStandardDatas() {
		let config: AJAXRequestConfig = {
			url: "/api/table/standardDatas",
			params: this.paramConfig1
		};
		AJAX.standardDataAPI<UserInfo>(config).then(res => {
			this.setState({
				customData: res.lists,
				paginationConfig1: getPaginationConfig(res, (page: number, pageSize?: number) => {
					this.paramConfig1.page = page;
					this.requestStandardDatas();
				})
			});
		});
	}

	handleChange = (pagination: PaginationConfig, filters: Record<keyof UserInfo, string[]>, sorter: SorterResult<UserInfo>) => {
		// debugger;
		let flag = this.state.ageSortOrder;
		if (flag == "descend") {
			flag = "ascend";
		} else if (flag == "ascend") {
			flag = "descend";
		}
		this.setState({
			ageSortOrder: flag
		});

		// 标准写法
		// this.setState({
		// 	ageSortOrder: sorter.order
		// });
	};

	handleDetele = (text: any, record: UserInfo, index: number) => {
		console.log(text, record, index);
		Modal.confirm({
			title: "消息",
			onOk: () => {
				message.info(`${record.userName}信息删除成功`);
				this.requestStandardDatas();
			}
		});
	};

	render() {
		const customColumns: ColumnProps<UserInfo>[] = [
			{
				key: "userName",
				title: (
					<div>
						<span className="icon icon-user"></span>
					</div>
				),
				dataIndex: "userName",
				width: 200
			},
			{
				key: "age",
				title: "年龄",
				dataIndex: "age",
				sorter: (a: UserInfo, b: UserInfo) => a.age - b.age,
				sortOrder: this.state.ageSortOrder
			},
			{
				key: "sex",
				title: "性别",
				dataIndex: "sex",
				render: formatSex
			},
			{
				key: "address",
				title: "住址",
				dataIndex: "address"
			}
		];

		const customColumns1: ColumnProps<UserInfo>[] = [
			{
				key: "userName",
				title: (
					<div>
						<span className="icon icon-user"></span>
					</div>
				),
				dataIndex: "userName",
				width: "30%" // 表头要对齐需要width字段
			},
			{
				key: "age",
				title: "年龄",
				dataIndex: "age",
				width: "30%"
			},
			{
				key: "address",
				title: "住址",
				dataIndex: "address",
				width: "50%"
			}
		];

		const customColumns2: ColumnProps<UserInfo>[] = [
			{
				key: "userName",
				title: (
					<div>
						<span className="icon icon-user"></span>
					</div>
				),
				dataIndex: "userName",
				width: 200
			},
			{
				key: "sex",
				title: "性别",
				dataIndex: "sex",
				render: formatSex
			},
			{
				key: "state",
				title: "状态",
				dataIndex: "state",
				render: state => {
					// let config: any = {
					// 	1: <span className="icon icon-edit">success1</span>,
					// 	2: <span className="icon icon-edit">success2</span>,
					// 	3: <span className="icon icon-edit">success3</span>,
					// 	4: <span className="icon icon-edit">success4</span>,
					// 	5: <span className="icon icon-edit">success5</span>
					// };
					let config: any = {
						1: <Badge status="success" text="成功"></Badge>,
						2: <Badge status="error" text="报错"></Badge>,
						3: <Badge status="default" text="正常"></Badge>,
						4: <Badge status="processing" text="进行中"></Badge>,
						5: <Badge status="warning" text="警告"></Badge>
					};
					return config[state];
				}
			},
			{
				title: "操作",
				render: (text: any, record: UserInfo, index: number) => {
					return (
						<Button
							size="small"
							onClick={() => {
								this.handleDetele(text, record, index);
							}}
						>
							{"删除"}
						</Button>
					);
				}
			}
		];

		return (
			<div>
				<div style={{ textAlign: "center", color: "red" }}>
					<h1>High Table</h1>
				</div>
				<Card title="排序" className="button-wrap">
					<Row>
						<Col span={24}>
							<Table
								bordered={true}
								rowKey={record => `${record.id}`} // 如果源数据中没有 key 字段 , 使用rowKey配置key
								columns={customColumns}
								dataSource={this.state.customData}
								pagination={this.state.paginationConfig1}
								onChange={this.handleChange}
							></Table>
						</Col>
					</Row>
				</Card>
				<Card title="操作按钮" className="button-wrap">
					<Row>
						<Col span={24}>
							<Table
								bordered={true}
								rowKey={record => `${record.id}`} // 如果源数据中没有 key 字段 , 使用rowKey配置key
								columns={customColumns2}
								dataSource={this.state.customData}
								pagination={this.state.paginationConfig1}
								onChange={this.handleChange}
							></Table>
						</Col>
					</Row>
				</Card>
				<Card title="头部固定" className="button-wrap">
					<Row>
						<Col span={24}>
							<Table bordered={true} columns={customColumns1} dataSource={this.state.customData} pagination={this.state.paginationConfig1} scroll={{ y: "180px" }}></Table>
						</Col>
					</Row>
				</Card>
				<Card title="左侧固定" className="button-wrap">
					<Row>
						<Col span={24}>
							<Table bordered={true} columns={customColumns2} dataSource={this.state.customData} pagination={this.state.paginationConfig1} scroll={{ x: "1800px" }}></Table>
						</Col>
					</Row>
				</Card>
			</div>
		);
	}
}

export default HighTable;
